<template>
  <div class="hello">
    <span>横向滚动</span>
    <cube-scroll
      ref="scroll"
      :data="items"
      direction="horizontal"
      class="horizontal-scroll-list-wrap"
    >
      <ul class="list-wrapper">
        <li v-for="(item, index) in items" :key="index" class="list-item">
          {{ item }}
        </li>
      </ul>
    </cube-scroll>
    <div v-if="tempListData.length > 0">
      <div v-for="(item, index) in tempListData" :key="index" class="card-list">
        <div>
          <cube-checkbox
            v-model="item.isChecked"
            position="right"
            @input="cardItemHandler($event, item)"
          >
            {{ item.name }}
          </cube-checkbox>
        </div>
        <span>{{ item.des }}----{{ item.isChecked }}</span>
      </div>
    </div>
    <div v-if="tempListData.length <= 0"></div>
    <cube-button @click="displayMoreHandler">Button</cube-button>
    <div
      class="mask-div"
      @click="showMoreModal = false"
      v-show="showMoreModal"
      @touchmove.prevent
    ></div>
    <div ref="moreModal" class="more-modal" v-show="showMoreModal">
      <div class="pao"></div>
      <div class="content-div moreBtn-style">
        <div class="moreBtn-div">
          <span>🐣</span>
          <div>新建客户</div>
        </div>
        <div class="moreBtn-div">
          <span>🐥</span>
          <div>新建联系人</div>
        </div>
        <div class="moreBtn-div">
          <span>🙈</span>
          <div>新建订单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const _data = [
  "😀 😁 😂 🤣 😃 🙃 ",
  "👈🏻  scroll 👉🏻 ",
  "🙂 🤔 😄 🤨 😐 🙃 ",
  "👈🏻  scroll 👉🏻 ",
  "😔 😕 🙃 🤑 😲 ☹️ ",
  "👈🏻  scroll 👉🏻 ",
  "🐣 🐣 🐣 🐣 🐣 🐣 ",
  "👈🏻  scroll 👉🏻 ",
  "🐥 🐥 🐥 🐥 🐥 🐥 ",
  "👈🏻  scroll 👉🏻 ",
  "🤓 🤓 🤓 🤓 🤓 🤓 ",
  "👈🏻  scroll 👉🏻 ",
  "🦔 🦔 🦔 🦔 🦔 🦔 ",
  "👈🏻  scroll 👉🏻 ",
  "🙈 🙈 🙈 🙈 🙈 🙈 ",
  "👈🏻  scroll 👉🏻 ",
  "🚖 🚖 🚖 🚖 🚖 🚖 ",
  "👈🏻  scroll 👉🏻 ",
  "✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ",
];
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      items: _data,
      listData: [
        { id: 1, name: "张三1", des: "大话西游" },
        { id: 2, name: "张三2", des: "大话西游" },
        { id: 3, name: "张三3", des: "大话西游" },
        { id: 4, name: "张三4", des: "大话西游" },
      ],
      tempListData: [],
      showMoreModal: false,
    };
  },
  created() {
    setTimeout(() => {
      this.listData.forEach((item) => {
        item.isChecked = true;
      });
      // this.tempListData = this.listData
    }, 50000);
  },
  methods: {
    submitEventHandler() {
      this.$createActionSheet({
        title: "我是标题~~~",
        active: 0,
        data: [
          {
            content: "舒适型",
          },
          {
            content: "七座商务",
          },
          {
            content: "豪华型",
          },
        ],
        onSelect: (item) => {
          this.$createToast({
            txt: `Clicked ${item.content}`,
            type: "correct",
            time: 1000,
          }).show();
        },
        onCancel: () => {
          this.$createToast({
            txt: `Clicked canceled`,
            type: "warn",
            time: 1000,
          }).show();
        },
      }).show();
    },
    cardItemHandler(isChecked, item) {
      console.log("cardItemHandler:", item);
      item.isChecked = isChecked;
      let index = this.tempListData.findIndex((el) => el.id === item.id);
      console.log("cardItemHandler:", index);
      // this.$set(this.tempListData, index, item)
      this.tempListData.splice(index, 1, item);
      console.log("cardItemHandler:", this.tempListData);
    },
    displayMoreHandler() {
      this.showMoreModal = !this.showMoreModal;
    },
    touchstart(e) {
      console.log('touchstart-----', e)
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.hello {
  .horizontal-scroll-list-wrap {
    width: 375px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    .cube-scroll-content {
      display: inline-block;
      color: red;
    }
    .list-wrapper {
      padding: 0 10px;
      line-height: 60px;
      white-space: nowrap;
      .list-item {
        display: inline-block
      }
    }
  }
  .card-list {
    height: 60px;
    box-shadow: 3px 5px 10px #888;
  }
  .mask-div {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #25262d;
    opacity: .4;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1002;
  } // 全局遮照(1002)
  .more-modal {
    position: relative;
    top: -5px;
    right: 5px;
    min-width: 300px;
    font-size: 15px;
    z-index: 1004;
    display: flex;
    flex-direction: column;
    .pao {
      position: absolute;
      top: 3px;
      right: 15px;
      width: 0;
      height: 0;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
      font-size: 0;
      line-height: 0;
    }
    .content-div {
      position: absolute;
      top: 15px;
      right: 5px;
      display: flex;
      font-size: 15px;
      flex-direction: column;
      background-color: #fff;
      color: #000;
      width: 45%;
      text-align: left;
      border-radius: 5px;
    }
  }
  .moreBtn-style {
    padding: 5px 8px;
    .moreBtn-div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        width: 15%;
        padding: 10px;
        color: #999;
      }
      div {
        width: 85%;
        font-size: 15px;
        padding-right: 5px;
        height: 50px;
        line-height: 52px;
        border-bottom: 1px dashed #eee;
      }
    }
  }
}
</style>
